<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementUI.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">

    <input type="text" v-model="form.title" placeholder="消息标题"> <br>
    <input type="text" v-model="form.content" placeholder="消息内容"> <br>
    <el-select v-model="form.fid" placeholder="请选择发布人" :clearable="true">
        <el-option v-for="c in userList" :label="c.username" :value="c.id"></el-option>
    </el-select>

    <el-button @click="findPage">查询</el-button>
    <el-button @click="updateReadStatus">全部标记已读</el-button>

    <el-table
            :data="tableData">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="title"
                label="消息标题">
        </el-table-column>
        <el-table-column
                prop="content"
                label="消息内容">
        </el-table-column>

        <el-table-column
                prop="fname"
                label="发送人">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="接收人">
        </el-table-column>
        <el-table-column
                prop="num"
                label="发送次数">
        </el-table-column>
        <el-table-column
                prop="status"
                label="发送状态">
        </el-table-column>

        <el-table-column
                prop="sendTime"
                label="发送时间">
        </el-table-column>

        <el-table-column
                prop="type"
                label="发送方式">
        </el-table-column>

        <el-table-column
                prop="readStatus"
                label="是否读取">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="短信消息" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
            <el-form-item label="消息标题" >
                <el-input v-model="pojo.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发送内容" >
                <el-input v-model="pojo.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="接收人" >
                <el-select v-model="pojo.sid" placeholder="请选择接收人" :clearable="true">
                    <el-option v-for="c in userList" :label="c.username" :value="c.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发送方式" >
                <el-select v-model="pojo.type" placeholder="请选择接收人" :clearable="true">
                    <el-option label="短信" value="短信"></el-option>
                    <el-option label="系统" value="系统"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="发送时间" >
                <el-date-picker
                        v-model="pojo.sendTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            form:{},
            userList:[],
            tableData:[],
            total:0,
            pageNum:1,
            pageSize:2,
            dialogFormVisible:false,
            pojo:{},
            user:{}
        },
        methods:{
            updateReadStatus(){
                axios.get("/message/updateReadStatus").then(res=>{
                    this.findPage();
                })
            },
            add(){
                this.pojo.fid = this.user.id;
                axios.post("/message/add",this.pojo).then(res=>{
                    this.findPage();
                    this.dialogFormVisible = false;
                    this.pojo={};
                })
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findPage();
            },
            handleAdd(){
                this.dialogFormVisible = true;
                this.pojo={};
            },
            findPage(){
                // 谁登录，谁是接收人
                this.form.sid = this.user.id;
                axios.post(`/message/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            findUserList(){
                axios.get("/user/findAll").then(res=>{
                    this.userList = res.data;
                })
            }
        },
        created(){
            this.user = JSON.parse(localStorage.getItem("user"));
            this.findPage();
            this.findUserList();
        }
    })
</script>
</body>
</html>